<template>
  <div>
    <!-- 顶部导航 -->
    <!-- 5、给组件绑定对象样式 -->
    <FilmTopNav :class="{ fixed: isFixed }" />
    <router-view>df</router-view>
  </div>
</template>

<script>
// 引入顶部导航组件
import FilmTopNav from "./subassembly/WendaTopNav";
export default {
  data() {
    return {
      // 4、添加是否吸顶标识 true吸顶，false固定
      isFixed: false,
    };
  },
  components: {
    WendaTopNav,
  },
  mounted() {
    // 1、监听屏幕滚动
    window.addEventListener("scroll", (e) => {
      // 2、获取滚动条距离顶部高度
      let scrollTop = document.documentElement.scrollTop;
      // 6、根据滚动条高度来决定是否吸顶
      if (scrollTop >= 200) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    });
  },
};
</script>

<style lang="scss" scoped>
/* 3、定义样式 */
.fixed {
  position: fixed;
  top: 0;
}
</style>